<template>




  <div class="filter-item">
    <!-- 父级按钮 -->
    <div 
      class="item-wrapper"
      :class="{ 
        'selected-with-height': isSelectedOrChildSelected,
        'active-parent': isActiveParent
      }"
    >
      <button 
        class="item-btn"
        :class="{ 
          'is-selected': item.hasChosen,
          'has-children': hasChildren 
        }"
        @click="handleParentClick"
      >
        {{ item.standardName }}
        <span v-if="hasChildren" class="expand-icon">
          <i class="fas" :class="item.expanded ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
        </span>
      </button>
    </div>

    <!-- 子级容器 -->
    <div 
      v-if="hasChildren && item.expanded" 
      class="children-container"
      :style="{ '--level': level }"
    >
      <FilterItem 
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :level="level + 1"
        :active-parent-id="activeItemId"
        @select="handleChildSelect"
        @set-active="handleSetActive"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue';

const props = defineProps({
  item: { type: Object, required: true },
  level: { type: Number, default: 0 },
  activeParentId: String
});

const emit = defineEmits(['select', 'set-active']);

const hasChildren = computed(() => {
  return props.item.children && props.item.children.length > 0;
});

const isSelectedOrChildSelected = computed(() => {
  return props.item.hasChosen || hasSelectedChild(props.item);
});

const isActiveParent = computed(() => {
  return props.activeParentId === props.item.id;
});

function hasSelectedChild(item) {
  if (!item.children) return false;
  return item.children.some(child => child.hasChosen || hasSelectedChild(child));
}

const handleParentClick = () => {
  // 设置当前为活跃父级
  emit('set-active', props.item.id);
  
  // 切换展开状态
  if (hasChildren.value) {
    props.item.expanded = !props.item.expanded;
  }
  
  // 选中当前项
  emit('select', { 
    id: props.item.id, 
    selected: true,
    clearOthers: true 
  });
};

const handleChildSelect = ({ id, selected, clearOthers }) => {
  // 子级选中时自动选中父级
  if (selected) {
    emit('select', { 
      id: props.item.id, 
      selected: true,
      clearOthers: false 
    });
  }
  emit('select', { id, selected, clearOthers });
};

const handleSetActive = (id) => {
  emit('set-active', id);
};

// 监听活跃父级变化
watch(() => props.activeParentId, (newVal) => {
  if (newVal && props.item.id !== newVal) {
    props.item.expanded = false;
  }
});
</script>

<style scoped>
.filter-item {
  display: flex;
  flex-direction: column;
}

.item-wrapper {
  transition: all 0.3s ease;
  margin-bottom: 4px;
}

.item-btn {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dcdfe6;
  color: #4e5969;
  background: white;
  transition: all 0.2s;
  text-align: left;
}

.item-btn:hover {
  border-color: #4096ff;
}

.item-btn.is-selected {
  background-color: #4096ff;
  color: white;
  border-color: #4096ff;
}

.item-btn.has-children {
  font-weight: 500;
}

.expand-icon {
  font-size: 12px;
  transition: transform 0.2s;
}

/* 动态高度控制 */
.selected-with-height {
  min-height: 60px;
}

.active-parent .item-btn {
  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.3);
}

.children-container {
  width: 100%;
  margin-top: 8px;
  padding-left: calc(15px * var(--level));
  transition: all 0.3s ease;
}
</style>
